<template>
	<view class="posted-bg">
		<uv-navbar title="我接收的任务" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIconSize="20px"
			leftIconColor="#313C56" :autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<view class=" width-100vw"
			style="background-color: white; border-top-left-radius: 16px; border-top-right-radius: 16px;"
			:style="{height: $uv.addUnit(pageHeight)}">
			<view style="width: 1px; height: 8px;"></view>
			<uv-input v-model="searchKey" placeholder="搜索任务" placeholderStyle="color:#95A4B3;font-size:12px;"
				confirmType="search" :autoBlur="true" fontSize="12px" color="#333333" prefixIcon="search"
				prefixIconStyle="fongSize:14px; marginLeft: 12px; color:#313C56;" border="none" shape="circle"
				customStyle="background-color: #F3F5FB; height: 32px; marginLeft: 12px; marginRight: 12px; ">
				<template v-slot:suffix>
					<view v-if="searching" class="flex-row-center" style="height: 32px; width: 32px;"
						@click="searchClear">
						<image src="../../static/searchClear.png" style="width: 16px; height: 16px;"></image>
					</view>
					<view v-else class="font-12 font-weight-regular flex-row-center tast_searchBtn" @click="searchTap">
						搜索
					</view>
				</template>
			</uv-input>
			<view class="" style="marginTop: 6px">
				<uv-tabs :list="tabs" customStyle="height:45px; "
					activeStyle="color:#313C56; fontWeight: 500; fontSize: 16px"
					inactiveStyle="color: #95A4B3; fontWight: 500; fontSize: 14px" lineColor="#EB7520" lineWidth="16px"
					lineHeight="4px" @click="tabsTap">
				</uv-tabs>
			</view>
			<view style="margin-top: 10px; " :style="{height: scrollHeight + 'px'}">
				<mescroll-uni :height="scrollHeight+ 'px'" @init="mescrollInit" @down="downCallback" @up="upCallback"
					:down="downOption" :up="upOption">
					<placeholder v-if="dataList == 0"></placeholder>
					<view v-else class="flex-column">
						<view v-for="(item,index) in dataList" :key="index" class="posted-item flex-column"
							:style="{opacity: item.status == 5 ? 0.5 : 1}">
							<view class="flex-row flex-between"
								style="margin-top: 12px; margin-left: 12px; margin-right: 12px;">
								<view class="font-14 font-weight-semibold" style="color: #313C56; margin-right: 10px;">
									{{ item.name }}
								</view>
								<view class="font-14 font-weight-regular" style="color: #6B7885; white-space: nowrap;"
									:style="[statusColor(item.status)]">
									<view v-if="item.status == 1"> 审核中 </view>
									<view v-if="item.status == 2"> 进行中 </view>
									<view v-if="item.status == 3"> 已完成 </view>
									<view v-if="item.status == 4"> 已关闭 </view>
								</view>
							</view>
							<view class="font-12 font-weight-regular"
								style="color: #95A4B3; margin-top: 4px; margin-left: 12px;">
								发布时间：{{ item.createTime }}
							</view>
							<view class="flex-row flex-between" style="margin-top: 13px; margin-left: 12px;">
								<view class="flex-row flex-items-end">
									<text class="font-20 font-weight-bold" style="color: #000000;">{{ item.totalAmount}}
									</text>
									<text class="font-12 font-weight-regular"
										style="color: #6B7885; margin-bottom: 2px; margin-left: 4px;">USDT</text>
								</view>
								<view class="flex-row flex-items-center font-12 font-weight-regular"
									style="margin-right: 12px;">
									<view class="posted-review flex-row-center" @click="projectDetail(item.id)">
										详情
									</view>
									<view v-if="item.status == 2" class="flex-column flex-center"
										style="background-color: #EB7520; height: 24px; padding-left: 8px; padding-right: 8px; border-radius: 12px; margin-left: 8px; color: white;"
										@click="projectDeal(item.id, item.status, item.digitalId)">
										{{ item.status == 2 ? '查看任务进度' : '查看原因' }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>

		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import taskItem from "@/components/task-item/task-item.vue"
	import {
		getProjectPublish,
		getProjectReceive
	} from "../../api";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			taskItem
		},
		data() {
			return {
				searchKey: '',
				searching: false,
				// 0=普通任务， 1=悬赏任务
				tabIndex: 0,
				tabs: [{
					name: '全部',
					status: 0
				}, {
					name: '审核中',
					status: 1
				}, {
					name: '进行中',
					status: 2
				}, {
					name: '已完成',
					status: 3
				}, {
					name: '已关闭',
					status: 4
				}],
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: '-- 没有更多了 --',
					empty: {
						use: false
					}
				},
				// 列表数据
				dataList: [],
				// 筛选项数量
				filterNum: 0,
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - 91 - 12
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 50
			}
		},
		mounted() {
			this.show()
		},
		methods: {
			show() {
				this.getProject()
			},
			getProject() {
				this.mescroll.resetUpScroll()
			},
			projectDeal(id, status, digital) {
				if (status != 2) {
					this.$refs.toast.show({
						msg: '系统审核未通过!'
					})
					return
				} else {
					uni.navigateTo({
						url: '/pages/task-accepting/task-accepting?id=' + id
					})
				}
			},
			statusColor(status) {
				const classes = {}
				if (status == 0) {
					classes.color = '#6B7885'
				} else if (status == 1) {
					classes.color = '#6B7885'
				} else if (status == 2) {
					classes.color = '#D82D2D'
				} else if (status == 3) {
					classes.color = '#EB7520'
				} else if (status == 4) {
					classes.color = '#6B7885'
				} else {
					classes.color = '#6B7885'
				}
				return classes
			},
			/**
			 * 加载列表数据
			 * @param {Object} page 刷新页面数据
			 */
			upCallback(page) {
				let params = {
					page: page.num,
					limit: page.size,
					status: this.tabIndex,
					name: this.searchKey
				}
				getProjectReceive(params).then((data) => {
					console.log(data)
					var curPageData = data.list;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.totalPage;
					//设置列表数据
					if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
					this.dataList = this.dataList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					this.mescroll.endByPage(curPageLen, totalPage);
				}).catch((e) => {
					this.mescroll.endErr()
				})
			},
			/**
			 * tabs点击事件
			 */
			tabsTap(item) {
				this.tabIndex = item.status
				this.getProject()
			},
			/**
			 * 搜索按钮事件
			 */
			searchTap() {
				if (!this.searchKey) {
					this.$refs.toast.show({
						msg: '请输入关键词!'
					})
					return
				}
				this.searching = true
				uni.hideKeyboard()
				this.getProject()
			},
			projectDetail(id) {
				uni.navigateTo({
					url: '/pages/task-detail/task-detail?id=' + id
				})
			},
			/**
			 * 搜索框清除按钮
			 */
			searchClear() {
				this.searching = false
				this.searchKey = ''
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss">
	.posted-review {
		width: 48px;
		height: 24px;
		background: #FFFFFF;
		border-radius: 12px;
		border: 1px solid #E9EAEB;
		color: #6B7885;
	}

	.posted-item {
		background-color: #F7F9FD;
		margin-left: 16px;
		margin-right: 16px;
		margin-top: 12px;
		border-radius: 12px;
		opacity: 1;
		padding-bottom: 12px;
	}

	.posted-bg {
		background-image: url('../../static/userBg2.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.tast_searchBtn {
		margin-right: 4px;
		color: white;
		width: 48px;
		height: 24px;
		background: linear-gradient(119deg, #EB5C20 0%, #EB9A20 100%);
		border-radius: 12px;
		opacity: 1;
	}
</style>